<template>
    <view class="body">
        <view class="top-box">
            <view class="slogan flex justify-center align-center">
                <image :src="logo"></image>
                <view class="app-name">{{ systemInfo.appName }}</view>
            </view>
            <template v-if="mode === 'phone'">
                <wd-input placeholder="请输入手机号" prefix-icon="mobile" :maxlength="11" border="bottom" v-model="phone" clearable></wd-input>
                <wd-input custom-class="margin-top-30" placeholder="请输入密码" prefix-icon="eye-close" type="password" border="bottom" v-model="password" clearable></wd-input>
            </template>
        </view>

        <view class="margin-top-60">
            <wd-button @click="submit" type="primary" block>立即登录</wd-button>
        </view>

        <view class="flex justify-between">
            <text @click="route('/pages/login/register')" class="btn-text color-999">没有账号</text>
            <text @click="route('/pages/login/forget')" class="btn-text color-main">忘记密码？</text>
        </view>

        <view>
            <!-- 隐私政策栏 -->
            <view :class="{ 'shake-vertical': shake }" class="color-333 font-24 agreement-box margin-top-50">
                <view class="flex-shrink-0">
                    <wd-checkbox v-model="checked"></wd-checkbox>
                </view>
                <text>
                    <text class="color-999" @click="checked = !checked">进入即代表你已同意</text>
                    <text @click="toProtocol('privacy')" class="color-main">《隐私政策》</text>
                    <text v-if="false">和</text>
                    <text v-if="false" @click="toProtocol('Contract')" class="color-main">《用户协议》</text>
                </text>
            </view>
        </view>

        <!--  滑块验证器  -->
        <verify-slider :verifyCodeType="verifyCodeType.LOGIN" @success="verifySuccess" @close="showVerify = false" v-if="showVerify"> </verify-slider>
    </view>
</template>

<script setup lang="ts">
import appConfig from '@/data/config.json';
import { computed, ref } from 'vue';
import route from '@/util/route';
import { verifyCodeType } from '@/data/enums/verifyCodeType';
import { $toast, $test } from '@/util/common';
import $apiLogin from '@/api/login';
import { useUserStore } from '@/stores';

const logo = appConfig.logo;
const systemInfo = uni.getSystemInfoSync();
const mode = ref('phone');
const phone = ref();
const password = ref();
const code = ref();
const shake = ref<Boolean>(false);
const checked = ref<Boolean>(false);

function submit() {
    if ($test.empty(phone.value)) return $toast.info('账号或手机号不能为空');
    if ($test.empty(password.value)) return $toast.info('密码不能为空');
    if (!checked.value) return $toast.info('请阅读并同意隐私政策与用户协议');
    if ($test.empty(securityCode.value)) {
        return (showVerify.value = true);
    }

    $apiLogin
        .login({
            roleType: 2,
            uid: phone.value,
            pwd: password.value,
            securityCode: securityCode.value,
            key: randomKey.value,
            validateFlag: 'slide',
        })
        .then(({ data }) => {
            $toast.success('登录成功');
            useUserStore().loginSuccess(data);
        })
        .catch((e) => {
            securityCode.value = '';
            randomKey.value = '';
        });
}

const showVerify = ref(false);
const securityCode = ref();
const randomKey = ref();
function verifySuccess(e: any) {
    showVerify.value = false;
    securityCode.value = e.securityCode;
    randomKey.value = e.randomKey;
    submit();
}

function toProtocol(type: string) {
    route({
        url: '/pages/setting/protocol',
        params: {
            type: type,
        },
    });
}
</script>

<style lang="scss" scoped>
@keyframes shake-vertical {
    0%,
    100% {
        transform: translateY(0);
    }
    10%,
    30%,
    50%,
    70% {
        transform: translateY(-8px);
    }
    20%,
    40%,
    60% {
        transform: translateY(8px);
    }
    80% {
        transform: translateY(6.4px);
    }
    90% {
        transform: translateY(-6.4px);
    }
}
.shake-vertical {
    -webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    animation: shake-vertical 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.disabled-btn {
    background: #eee;
}
.top-box {
    display: flex;
    flex-direction: column;
    height: 580rpx;
}
.bg {
    width: 100vw;
    height: 380rpx;
    margin-left: -60rpx;
}
.body {
    padding: 30rpx 60rpx;
    background: #fff;
}

.slogan {
    margin-top: 100rpx;
    color: #333;
    height: 250rpx;
    font-size: 50rpx;
    .app-name {
        font-size: 64rpx;
    }
    image {
        border-radius: 10rpx;
        margin-right: 20rpx;
        width: 60rpx;
        height: 60rpx;
        width: 80rpx;
        height: 80rpx;
    }
}
.btn-text {
    line-height: 100rpx;
    font-size: 24rpx;
}

.img-code {
    height: 48rpx;
    width: 120rpx;
}
.agreement-box {
    position: fixed;
    bottom: 50rpx;
    display: flex;
    align-items: center;
}
.btn-other {
    color: $-color-theme;
    font-size: 32rpx;
    margin: 30rpx auto 0;
    text-align: center;
}
</style>
